<template>
  <div
    v-empty="!showContent"
    xs-empty-icon="nopermission"
    xs-empty-text="暂无权限"
    class="detail-tab">
    <template v-if="showContent && showTable">
      <div
        v-if="purchaseReadAuth"
        class="purchase-wrapper">
        <flexbox
          align="center"
          justify="flex-end"
          class="control-btn">
          <el-button
            v-if="purchaseSaveAuth"
            type="primary"
            size="mini"
            icon="el-icon-plus"
            class="xr-btn--orange"
            @click="handleCreate('jxc_purchase')">
            新建采购单
          </el-button>
        </flexbox>
        <tab-table
          :request-config="purchaseTabReqConfig"
          :height="300"
          class="table-list"
          @row-click="handleTableRowClick('jxc_purchase', ...arguments)" />
      </div>

      <div
        v-if="retreatReadAuth"
        class="purchase-wrapper">
        <flexbox
          align="center"
          justify="flex-end"
          class="control-btn">
          <el-button
            v-if="retreatSaveAuth"
            type="primary"
            size="mini"
            icon="el-icon-plus"
            class="xr-btn--orange"
            @click="handleCreate('jxc_retreat')">
            采购退货单
          </el-button>
        </flexbox>
        <tab-table
          :request-config="retreatReqConfig"
          :height="300"
          class="table-list"
          @row-click="handleTableRowClick('jxc_retreat', ...arguments)" />
      </div>
    </template>

    <j-x-c-full-screen-detail
      v-if="showDetail && rowId && detailType"
      :id="rowId"
      :type="detailType"
      @update="handleRefresh"
      @close="showDetail = false" />

    <create-com
      v-if="showCreate"
      :type="type"
      :config="createConfig"
      @update="handleRefresh"
      @close="showCreate = false" />
  </div>
</template>

<script>
import {
  jxcFieldDetailOtherFieldListAPI,
  jxcFieldQueryListAPI
} from '@/api/jxc/field'

import CreateCom from '../../../components/Create/CreateCom'
import TabTable from '../../../components/DetailTab/TabTable'
import JxcTypes from '../../../jxcTypes'
import { mapGetters } from 'vuex'

export default {
  name: 'TabPurchase',
  components: {
    TabTable,
    CreateCom,
    JXCFullScreenDetail: () => import('../../../components/JXCFullScreenDetail')
  },
  props: {
    id: {
      type: [String, Number],
      required: true
    },
    detailData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showTable: false,
      showCreate: false,
      type: '',

      createConfig: {},

      purchaseDataList: [],
      returnedDataList: [],

      purchaseTabReqConfig: {
        fieldParams: {
          label: JxcTypes.jxc_purchase.label,
          otherLable: 5
        },
        fieldRequest: jxcFieldDetailOtherFieldListAPI,
        listParams: {
          label: JxcTypes.jxc_purchase.label,
          searchList: []
        },
        listRequest: jxcFieldQueryListAPI,
        canVisitField: ['orderNumber']
      },

      retreatReqConfig: {
        fieldParams: {
          label: JxcTypes.jxc_retreat.label,
          otherLable: 6
        },
        fieldRequest: jxcFieldDetailOtherFieldListAPI,
        listParams: {
          label: JxcTypes.jxc_retreat.label,
          searchList: []
        },
        listRequest: jxcFieldQueryListAPI,
        canVisitField: ['orderNumber', 'purchaseId']
      },

      rowId: '',
      detailType: '',
      showDetail: false
    }
  },
  computed: {
    ...mapGetters(['jxc']),
    purchaseReadAuth() {
      return this.jxc && this.jxc.purchase && this.jxc.purchase.read
    },
    purchaseSaveAuth() {
      return this.jxc && this.jxc.purchase && this.jxc.purchase.save
    },
    retreatReadAuth() {
      return this.jxc && this.jxc.retreat && this.jxc.retreat.read
    },
    retreatSaveAuth() {
      return this.jxc && this.jxc.retreat && this.jxc.retreat.save
    },
    showContent() {
      return this.purchaseReadAuth || this.retreatReadAuth
    }
  },
  watch: {
    id: {
      handler(val) {
        this.showTable = false
        const params = [
          {
            name: 'supplier_id',
            formType: 'text',
            type: 13,
            values: [this.id]
          },
          {
            name: 'state',
            formType: 'text',
            type: 2,
            values: [0]
          }
        ]
        this.purchaseTabReqConfig.listParams.searchList = params
        this.retreatReqConfig.listParams.searchList = params
        this.tableOk = false
        this.$nextTick(() => {
          this.showTable = true
        })
      },
      immediate: true
    }
  },
  methods: {
    /**
     * 刷新
     */
    handleRefresh() {
      this.showTable = false
      this.$nextTick(() => {
        this.showTable = true
      })
    },

    /**
     * 新建
     */
    handleCreate(type) {
      this.type = type
      this.createConfig = {
        defaultValue: {
          supplierId: { id: this.id, name: this.detailData.supplierName }
        },
        disabledField: ['supplierId']
      }
      this.showCreate = true
    },

    handleTableRowClick(type, row, field) {
      this.showDetail = false
      this.detailType = type
      this.rowId = ''
      if (type === 'jxc_purchase' && field === 'orderNumber') {
        this.detailType = type
        this.rowId = row.purchaseId
        this.showDetail = true
      } else if (type === 'jxc_retreat') {
        if (field === 'orderNumber') {
          this.rowId = row.retreatId
          this.showDetail = true
        } else if (field === 'purchaseId') {
          this.detailType = 'jxc_purchase'
          this.rowId = row.purchaseId.id
          this.showDetail = true
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../styles/detailTab";

.detail-tab {
  .purchase-wrapper {
    margin-bottom: 15px;
    .control-btn {
      margin-bottom: 10px;
    }
  }
}
</style>
